import React from 'react'
import { View, Image } from '@tarojs/components'
import styles from './index.module.scss'

import iconPlay from '@/static/icons/circle-play.svg'
import imgTodoImg2 from '@/static/fake/todo-img-2.png'

interface TodoItemProps {
    title: string // 标题
    duration: string // 时长
    flexibility: string // 周期
    completed?: boolean // 是否完成
    imgUrl?: string // 图片地址
}
const TodoItem: React.FC<TodoItemProps> = ({
    title,
    duration,
    completed,
    flexibility,
    imgUrl = imgTodoImg2,
}) => {
    return (
        <View
            className={
                completed
                    ? styles.completed + ' ' + styles.todoItem
                    : styles.todoItem
            }
        >
            <View className={styles.todoItemImage}>
                <Image src={imgUrl} />
            </View>
            <View className={styles.todoItemContent}>
                <View className={styles.todoItemTitle}>{title}</View>
                <View className={styles.todoItemInfo}>
                    <View className={styles.todoItemDuration}>{duration}</View>
                    <View className={styles.todoItemflexibility}>
                        {flexibility}
                    </View>
                </View>
            </View>
            <View className={styles.todoItemIndicator}>
                <Image src={iconPlay} />
            </View>
        </View>
    )
}
export default TodoItem
